<template>
  <div class="step-wrap">
    <div class="spin-mask" v-if="loading">
      <a-spin />
    </div>
    <a-form style="max-width: 600px; margin: 40px auto 0;" :form="form">
      <a-alert :closable="true" message="确认提现后，资金将直接打入填写账户，无法退回。" style="margin-bottom: 24px;" />
      <a-form-item label="收款账户" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ formData.payeeAct }}
      </a-form-item>
      <a-form-item label="账户余额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.totalMoney }}
      </a-form-item>
      <a-form-item label="冻结金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.freezeMoney }}
      </a-form-item>
      <a-form-item label="可提现余额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.enabledMoney }}
      </a-form-item>
      <a-form-item label="提现金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.withdrawMoney }}
      </a-form-item>
      <a-form-item label="手续费" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.rateMoney }}
        <span class="tip-msg">（提现金额的 0.50%）</span>
      </a-form-item>
      <a-form-item label="实际到账金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" class="stepFormText">
        {{ '￥' + formData.realMoney }}
        <span class="tip-msg">（已扣除手续费）</span>
      </a-form-item>
      <a-form-item label="提现密码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input
          placeholder="输入提现密码"
          type="password"
          :maxLength="6"
          v-decorator="[
            'withdrawPassword',
            {
              rules: [{ required: true, message: '请输入提现密码' }],
              validateTrigger: ['change', 'blur']
            }
          ]"
        >
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { addWithDrawMoney } from '@/api/api'

export default {
  name: 'Step2',
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      withdrawMoney: '',

      //表单信息
      form: this.$form.createForm(this)
    }
  },
  methods: {
    /**
     * 提交
     */
    nextStep() {
      let that = this
      this.form.validateFields((err, value) => {
        if (!err) {
          var params = {
            ...this.formData,
            withdrawPassword: value.withdrawPassword
          }

          this.loading = true
          addWithDrawMoney(params)
            .then(res => {
              that.loading = false
              if (res.code == 0) {
                that.$notification['success']({ message: '提现成功', description: '操作成功', duration: 4 })
                that.$emit('nextStep', that.formData)
              } else {
                that.addWithdrawMoneyFailed()
              }
            })
            .catch(err => {
              console.error(err)
            })
        }
      })
    },

    addWithdrawMoneyFailed(msg) {
      this.$notification['error']({
        message: '提现失败',
        description: msg,
        duration: 4
      })
    },

    /**
     * 上一步
     */
    prevStep() {
      this.$emit('prevStep')
    }
  }
}
</script>

<style lang="scss" scoped>
.step-wrap {
  position: relative;

  .spin-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    z-index: 100;
    background: rgba($color: #fff, $alpha: 0.4);
  }
}

.stepFormText {
  margin-bottom: 24px;

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }
}

.disable-money {
  color: #f50;
}

.disable-money,
.enable-money,
.total-money {
  font-weight: 500;
  font-size: 14px;
}

.enable-money {
  color: #87d068;
}
</style>
